<template>
    <div id="cwh">
        <div id="ole-toolbar"></div>
        <div class="tools">
            <el-tooltip class="box-item" effect="dark" content="选择" placement="left">
                <el-button class="mbtn" :icon="Pointer" @click="choose()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="绘制裁剪区域" placement="left">
                <el-button class="mbtn" :icon="Crop" @click="drawcutarea()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="合并" placement="left">
                <el-button class="mbtn" :icon="Menu" @click="f_union()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="切割" placement="left">
                <el-button class="mbtn" :icon="PieChart" @click="f_cut()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="切割调整" placement="left">
                <el-button class="mbtn" :icon="Edit" @click="modify()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="属性" placement="left">
                <el-button class="mbtn" :icon="Operation" @click="property()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="放大" placement="left">
                <el-button class="mbtn" :icon="ZoomIn" @click="zoomin()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="缩小" placement="left">
                <el-button class="mbtn" :icon="ZoomOut" @click="zoomout()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="还原" placement="left">
                <el-button class="mbtn" :icon="DArrowLeft" @click="f_history()"></el-button>
            </el-tooltip>

            <!-- </el-button-group> -->
        </div>
        <div class="area">
            <el-dialog title="历史记录" class="m_dlg" v-model="hisshow" height="500">
                <div class="sjxian">
                    <i class="sij_xian_01"></i>
                    <i class="sij_xian_02"></i>
                    <i class="sij_xian_03"></i>
                    <i class="sij_xian_04"></i>
                    <i class="sij_xian_05"></i>
                    <i class="sij_xian_06"></i>
                    <i class="sij_xian_07"></i>
                    <i class="sij_xian_08"></i>
                </div>
                <div style="padding: 20px;">
                    <el-table
                        :cell-style="{ 'text-align': 'center', 'background-color': '#0B4761', 'color': 'white', 'border': 'none' }"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#0B4761', 'color': 'white' }"
                        :data="hislist" height="500">
                        <el-table-column prop="gid" label="gid" width="180" />
                        <el-table-column prop="euser" label="用户名称" />
                        <el-table-column prop="edit_time" label="操作日期" />
                        <el-table-column prop="os_info" label="行为" />
                        <el-table-column label="行为">
                            <template #default="scope">
                                <el-button @click="f_return(scope.row.gid)">还原</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-dialog>
        </div>
        <div class="map" id="map"></div>
        <div class="cleardialog area">
            <el-dialog :title="usernm" draggable class="mfloat" v-model="xzlistshow" width="500" :modal="false"
                :close-on-click-modal="false" :show-close="false">
                <div class="listcon">
                    <el-table :data="nrelist" border height="480">
                        <el-table-column type="index" label="序号" width="60" align="center" />
                        <el-table-column prop="name" label="村(居)委会名称" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button style="margin-right: 10px;" size="small"
                                    @click="getmessage(scope.row)">修改</el-button>
                                <el-button size="small" @click="aimcwh(scope.row)">定位</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>

                <!-- <div class="listcon">
                    <div style="margin: 5px 0;" v-for="(item, index) in nrelist">
                        <span>{{ index + 1 }}</span>
                        <el-icon style="margin: 0 5px;cursor: pointer;" @click="getmessage(item)">
                            <Operation />
                        </el-icon>
                        <span style="cursor: pointer;" @click="aimcwh(item)">
                            {{ item.name }}
                        </span>
                    </div>
                </div> -->
            </el-dialog>
        </div>
        <div class="area">
            <el-dialog class="m_dlg" title="修改村(居)委会属性" v-model="Infoshow" height="500" width="500">
                <div class="sjxian">
                    <i class="sij_xian_01"></i>
                    <i class="sij_xian_02"></i>
                    <i class="sij_xian_03"></i>
                    <i class="sij_xian_04"></i>
                    <i class="sij_xian_05"></i>
                    <i class="sij_xian_06"></i>
                    <i class="sij_xian_07"></i>
                    <i class="sij_xian_08"></i>
                </div>
                <div v-show="changels" class="m_form">
                    <el-form :model="InfoForm" label-width="auto">
                        <el-form-item label="编号">
                            <el-input v-model="InfoForm.gid" readonly />
                        </el-form-item>
                        <el-form-item label="行政代码">
                            <el-input v-model="InfoForm.code" type="number" />
                        </el-form-item>
                        <el-form-item label="村(居)委会">
                            <el-input v-model="InfoForm.name" />
                        </el-form-item>
                        <el-form-item label="隶属上级">
                            <div style="display: flex;width: 100%;justify-content: space-between;">
                                <el-input style="width: 75%;" v-model="InfoForm.pcode" readonly />
                                <el-button type="primary" @click="updateLs()">更改隶属</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="guid">
                            <el-input v-model="InfoForm.guid" readonly />
                        </el-form-item>
                    </el-form>
                </div>

                <div v-show="!changels" class="m_form">
                    <el-form label-width="auto">
                        <el-form-item label="隶属地市">
                            <el-select v-model="shivalue" placeholder="请选择" style="width: 240px"
                                @change="QHlist(shivalue, 2)">
                                <el-option v-for="item in shiList" :key="item.code" :label="item.name"
                                    :value="item.code" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="隶属县区">
                            <el-select v-model="quvalue" placeholder="请选择" style="width: 240px"
                                @change="QHlist(quvalue, 3)">
                                <el-option v-for="item in qulist" :key="item.code" :label="item.name"
                                    :value="item.code" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="隶属村(居)委会">
                            <el-select v-model="whvalue" placeholder="请选择" style="width: 240px">
                                <el-option v-for="item in whlist" :key="item.code" :label="item.name"
                                    :value="item.code" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer" v-show="changels">
                        <el-button type="primary" @click="updateVillage()">
                            保存
                        </el-button>
                    </div>
                    <div class="dialog-footer" v-show="!changels">
                        <el-button type="primary" @click="transfer()" style="margin-right: 10px;">
                            确定
                        </el-button>
                        <el-button @click="changels = true;">
                            取消
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class="m_footer">
            <div style="display: flex;justify-content: space-between;align-items: center;height: 38px;font-size: 14px;">
                <div style="display: flex;justify-content: flex-start;">
                    <div style="margin-right: 20px;">区划名称：{{ localname }}</div>
                    <div>区划编码：{{ localcode }}</div>
                </div>
                <div>
                    坐标：
                    {{ Number($store.curlon).toFixed(5) }}，
                    {{ Number($store.curlat).toFixed(5) }}
                    比例尺：
                    <span v-show="Number($store.scale) > 1">
                        1:{{ Number($store.scale).toFixed(0) * 1000 }}
                    </span>
                    <span v-show="Number($store.scale) < 1">
                        1:{{ Number($store.scale * 10).toFixed(0) * 100 }}
                    </span>
                </div>
                <div>建设单位：河南省统计局</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, onMounted, reactive, onUnmounted } from "vue";
import $mapreq from "../../api/mapreq";
import { Pointer, Crop, Menu, PieChart, Edit, Operation, ZoomIn, ZoomOut, DArrowLeft } from '@element-plus/icons-vue';
import { init, jzwPOLYGON, unloadMap, choose, drawcutarea, union, modify, cut, mapreset, zoomin, zoomout, aimWKT } from '../../utils/mapjs/map';
import { dataStore } from "../../store/data";
const $store = dataStore();
const pcode = ref("");
const hisshow = ref(false);
const hislist = ref([]);
const xzlistshow = ref(true);
const localname = ref(localStorage.getItem('qhinfo'));
const localcode = ref(localStorage.getItem('code'));
const usernm = ref('');
onMounted(() => {
    usernm.value = localStorage.getItem('usernm');
    pcode.value = localStorage.getItem("code");
    init();
    mapreset();
    getlist();
    QHlist('', 1);
});
onUnmounted(() => {
    unloadMap();
})
function property() {
    if (cut().area.length != 1) {
        ElMessage({
            message: '请选择一个区域!',
            type: 'warning',
        });
    } else {
        getmessage(cut().area[0].values_);
    }
}
function f_cut() {
    if (cut().area.length != 1) {
        ElMessage({
            message: '请选择一个被切割区!',
            type: 'warning',
        });
    } else if (cut().geom == '' || cut().geom == 'MULTIPOLYGON((()))') {
        ElMessage({
            message: '请绘制一个切割区!',
            type: 'warning',
        });
    } else {
        ElMessageBox.confirm(
            '确定进行切割操作吗?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            let data = {};
            data.gid = cut().area[0].values_.gid;
            data.geom = cut().geom;
            console.log(data);
            c_cut(data);
        })

    }
}
function aimcwh(e) {
    aimWKT(e.geom);
}
function c_cut(data) {
    $mapreq.mapCut(data).then(res => {
        if (res.code == 200) {
            ElMessage({
                message: '操作成功!',
                type: 'success'
            });
            mapreset();
            getlist();
        }
    }).catch(err => {
        ElMessage({
            message: err.message,
            type: 'warning'
        });
    });
}
function f_return(e) {
    ElMessageBox.confirm(
        '确定还原吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $mapreq.historyBack(e).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success',
                });
                mapreset();
                getlist();
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                });
            }
        });
    })

}
function f_history() {
    hisshow.value = true;
    $mapreq.getCzList().then(res => {
        if (res.code == 200) {
            hislist.value = res.data;
        }
    });
}
function f_union() {
    if (union().length != 2) {
        ElMessage({
            message: "请选择两个绘制区域!",
            type: 'warning'
        });
    } else {
        ElMessageBox.confirm(
            '确定合并区域?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            let obj = {};
            obj.gid1 = union()[0].values_.gid;
            obj.gid2 = union()[1].values_.gid;
            merge(obj);
        })

    }
}
function merge(e) {
    $mapreq.mapMerge(e).then(res => {
        if (res.code == 200) {
            ElMessage({
                message: '操作成功!',
                type: 'success'
            });
            mapreset();
            getlist();
        }
    });
}
const nrelist = ref([]);
function getlist() {
    let code=localStorage.getItem("code")
    $mapreq.getplot(code).then(res => {
        if (res.code == 200) {
            nrelist.value = res.data;
            jzwPOLYGON(res.data);
        }
    });
}
const shivalue = ref('');
const shiList = ref([]);
const quvalue = ref('');
const qulist = ref([]);
const whvalue = ref('');
const whlist = ref([]);
function QHlist(code, level) {
    let obj = {};
    obj.code = code;
    $mapreq.getQHlist(obj).then(res => {
        if (res.code == 200) {
            if (level == 1) {
                shiList.value = res.data;
            } else if (level == 2) {
                quvalue.value = '';
                whvalue.value = '';
                qulist.value = res.data;
            } else if (level == 3) {
                whvalue.value = '';
                whlist.value = res.data;
            }
        }
    });
}

const InfoForm = ref({});
const Infoshow = ref(false);
function getmessage(e) {
    let gid = e.gid;
    $mapreq.getVillage(gid).then(res => {
        if (res.code == 200) {
            InfoForm.value = res.data;
            Infoshow.value = true;
        }
    });
}

function updateVillage() {
    ElMessageBox.confirm(
        '确定修改吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        let obj = {};
        obj.gid = InfoForm.value.gid;
        obj.name = InfoForm.value.name;
        obj.code = InfoForm.value.code;
        $mapreq.updVillage(obj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success'
                });
                mapreset();
                getlist();
                Infoshow.value = false;
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                });
            }
        });
    }).catch(() => {

    });
}
const changels = ref(true);
const curcode = ref('');
function updateLs() {
    curcode.value = InfoForm.value.code;
    changels.value = false;
}
function transfer() {
    if (shivalue.value == '') {
        ElMessage({
            message: '请选择市区!',
            type: 'warning'
        });
    } else if (quvalue.value == '') {
        ElMessage({
            message: '请选择区划!',
            type: 'warning'
        });
    } else if (whvalue.value == '') {
        ElMessage({
            message: '请选择村(居)委会!',
            type: 'warning'
        });
    } else {
        ElMessageBox.confirm(
            '确定修改吗?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            let obj = {};
            obj.ad_code = curcode.value;
            obj.target_ad_code = whvalue.value;
            $mapreq.TranserQH(obj).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '操作成功,前往转移申请页面查看!',
                        type: 'success'
                    });
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning'
                    });
                }
            });
        })

    }
}
</script>

<style scoped lang="less">
#map {
    height: 100%;

    .ol-overlaycontainer-stopevent {
        display: none;
    }

    .ol-zoom-out {
        display: none;
    }

    .ol-zoom-in {
        display: none;
    }
}
</style>
<style lang="less">
#map {

    height: 100%;

    .ol-overlaycontainer-stopevent {
        display: none;
    }

    .ol-zoom-out {
        display: none;
    }

    .ol-zoom-in {
        display: none;
    }
}

#cwh {
    position: relative;
    height: 100%;

    .m_footer {
        position: fixed;
        z-index: 99999;
        bottom: 0;
        color: white;
        background-color: rgba(0, 0, 0, .8);
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .listcon {
        max-height: 500px;
        overflow-y: scroll;
        color: black;
        padding: 10px;
        height: 500px;
    }

    ::-webkit-scrollbar {
        background-color: #000;
        width: 0px;
        border-radius: 500px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 500px;
    }

    .mfloat {
        position: fixed;
        left: 30px;
        // background-color: rgba(3, 36, 56, 0.6);
        color: black;
        width: 25%;
        height: auto;
        padding: 0px;
        border-radius: 10px;
    }

    .m_dlg {
        background-color: rgba(3, 36, 56, 0.6);
        color: white;
        height: auto;
        padding: 0px;

        .m_form {
            padding: 20px;

            .el-form-item__label {
                color: white;
            }

            .el-input {
                --el-input-border-color: #095e7e !important;
                --el-input-hover-border-color: #4cbfea !important;
            }

            .el-input__inner {
                color: #0fb3e6 !important;
            }

            .el-input__wrapper,
            .el-input-group__prepend {
                background: none !important;
            }
        }

        .dialog-footer {
            padding: 0 20px 20px 0;
        }
    }

    .el-overlay-dialog {
        pointer-events: none;
    }

    .el-dialog {
        pointer-events: auto;
    }

    .tools {
        position: absolute;
        display: flex;
        width: 50px;
        justify-content: flex-start;
        flex-wrap: wrap;
        top: 20px;
        right: 10px;
        z-index: 99999;

        .mbtn {
            width: 20px;
            margin-top: 10px;

            .el-icon {
                color: #133C7E;
            }
        }
    }

    .el-button+.el-button {
        margin-left: 0 !important;
    }
}

.area .el-dialog__title {
    display: block;
    color: #fff !important;
    // background: url(/img/yk_ico1.png) 0 3px no-repeat;
    // padding-left: 26px;
    font-size: 16px;

}

.el-dialog__headerbtn {
    top: -2px;
}

.area .el-dialog__header {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    background-color: #133C7E;
    border-radius: 10px 10px 0 0;

    .el-dialog__title {
        color: #fff;
        font-size: 16px;
    }

    .el-icon svg {
        color: #fff;
    }
}


.el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
    height: calc(100% - 60px);
    // background-color: rgba(3, 36, 56, 0.6);
    overflow-y: auto;
}

.cleardialog>div {
    width: 0;
}

.sjxian i {
    display: block;
    background: #fff;
    position: absolute;
}

.sjxian {
    .sij_xian_01 {
        top: 0;
        left: 0;
        width: 11px;
        height: 1px;
    }

    .sij_xian_02 {
        top: 0;
        left: 0;
        width: 1px;
        height: 11px;
    }

    .sij_xian_03 {
        bottom: 0;
        left: 0;
        width: 11px;
        height: 1px;
    }

    .sij_xian_04 {
        bottom: 0;
        left: 0;
        width: 1px;
        height: 11px;
    }

    .sij_xian_05 {
        top: 0;
        right: 0;
        width: 11px;
        height: 1px;
    }

    .sij_xian_06 {
        top: 0;
        right: 0;
        width: 1px;
        height: 11px;
    }

    .sij_xian_07 {
        bottom: 0;
        right: 0;
        width: 11px;
        height: 1px;
    }

    .sij_xian_08 {
        bottom: 0;
        right: 0;
        width: 1px;
        height: 11px;
    }
}
</style>
